<template>
    <div style="background: #fff">
       <index-header :content="list.active"></index-header>  
       <carrousel></carrousel>
       <content-box :content1="box1"></content-box>
       <content-two></content-two>
       <content-tre></content-tre>
       <div class="fixedleft"></div>
       <div class="fixedright"></div>
    </div>
</template>

<script>
import indexHeader from "@/main/components/Header"
import carrousel from "@/main/components/Swiper"
import ContentBox from "@/main/components/ContentBox"
import ContentTwo from "@/main/components/ContentTwo"
import ContentTre from "@/main/components/ContentTre"
export default {
    name: "indexMain",
    data(){
        return {
            "list":{
                "active":[["https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg"],["https://nie.res.netease.com/r/pic/20190529/bfc3c80b-4742-462d-a6a1-748316fb99f0.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg"],["https://nie.res.netease.com/r/pic/20190627/81052138-6a21-4e2a-84e9-3326c45f49b3.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg","https://nie.res.netease.com/r/pic/20190627/cc7d8f82-655d-41b7-8a50-38a7551c611c.jpg"]]
            },
            "box1": false
        }
    },
    components: {
        indexHeader,
        carrousel,
        ContentBox,
        ContentTwo,
        ContentTre
        
    },
    mounted(){
        window.addEventListener("scroll",()=>{
            let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if(scrollTop>=400){
                this.box1 = true;
            }
        })
        
        
    }
}
</script>

<style lang="stylus" scoped>
    .fixedleft
        position: fixed
        bottom: 2rem
        left: 1rem
        z-index: 4
        width: 3.9rem
        height: 4.86rem
        background: url("/static/img/leftgif.gif") no-repeat 0 0/3.9rem 4.86rem
    .fixedleft::after
        position: absolute 
        bottom: -.8rem
        left: 0
        content: '.'
        font-size: 0
        width: 3.9rem
        height: 1.7rem
        background: url("/static/img/box1.png") no-repeat -19.6rem -10.3rem
    .fixedright
        position: fixed
        bottom: 2rem
        right: 1.2rem
        z-index: 4
        width: 4.6rem
        height: 4.8rem
        background: url("/static/img/rightgif.gif") no-repeat 0 0/4.6rem 4.8rem
    .fixedright::after
        content: '.'
        font-size: 0
        position: absolute
        left: -.8rem
        top: 0
        width: 1.9rem
        height: 4.8rem
        background: url("/static/img/box1.png") no-repeat -3.1rem 0
</style>
